<%--
  Created by IntelliJ IDEA.
  User: 邱华英
  Date: 2022/10/1
  Time: 13:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@page import="java.util.List" %>
<%@page import="java.util.Map" %>
<%@page import="com.goktech.entity.type" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<html>
<head>
    <title>图书管理界面</title>
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/readeradmin.css">
    <link rel="stylesheet" href="/css/booksearch.css">
    <link rel="stylesheet" href="/css/index.css">

    <style type="text/css">
        .fengye{
            border: 1px solid;
            display: inline;
            padding: 8px 16px;
        }

        span{
            color: aliceblue;
        }
        /*table{*/

        /*    width: 980px;*/
        /*}*/

        table{

            width: 980px;

            font-size: 10px;

        }
        th{
            white-space: nowrap;
        }

        img{
            width: 100%;
            height: 100%;
        }




        #fff{
            float: left;
            margin-left: 50px;
            width:693px;
            height: 44px;
            border: 1px solid black;
            position: relative;
        }

        #sss {
            float: left;
            height: 41px;
            width: 100px;
            text-align: center;
        }

        #ttt {
            float: left;
            width: 510px;
            height: 41px;
            padding-left: 10px;
            line-height: 41px;
        }

        #iii {
            /* float: right; */
            position: absolute;
            top: 0;
            left: 611px;
            width: 80px;
            height: 41px;
            background-color: #2d241d;
            font-size: 16px;
            color: #fff;
        }
        .tupian img {
            float: right;
            width: 980px;
            height: 465px;
        }

        .minyan {
            float: left;
            width: 100%;
            height: 163px;
            margin-top: 12px;
            background-color: green;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            line-height: 163px;
            color: #fff;
            background: rgba(0, 0, 0, 0.7);
        }
    /*<title>图书管理界面</title>*/
    /*<style type="text/css">*/
    /*    li{*/
    /*        border: 1px solid;*/
    /*        display: inline;*/
    /*        padding: 8px 16px;*/
    /*    }*/
    /*    table,td,tr,th{*/
    /*        border: 1px solid  black;*/
    /*        text-align: center;*/
    /*        border-collapse: collapse;*/
    /*        height: 55px;*/
    /*    }*/
    /*    table{*/
    /*        width:100%;*/
    /*    }*/
    /*    table{*/
    /*        border-collapse: collapse;*/
    /*        !*width: 96%;*!*/
    /*        !*margin: 0 2%;*!*/
    /*        table-layout: fixed;*/
    /*    }*/
        /*tr{*/
        /*    width: 100%;*/
        /*}*/
        /*tr td{*/
        /*    overflow: hidden;*/
        /*    white-space: nowrap;*/
        /*    text-overflow: ellipsis;*/
        /*    word-wrap: break-word;*/
        /*}*/
        /*tr td:nth-child(1),tr td:nth-child(3){*/
        /*    width: 20%;*/
        /*}*/
        /*tr td:nth-child(2){*/
        /*    width: 56%;*/
        /*}*/
        /*img{*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*}*/
        table{

            width: 980px;
            height: 350px;
            font-size: 10px;

        }
        th{
            white-space: nowrap;
        }

        img{
            width: 100%;
            height: 100%;
        }
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            top:0;
            bottom: 0;
            left:0;
            right: 0;
            background: rgba(0,0,0,.5);
            z-index: 2;
        }
        .c2{
            background-color: white;
            position: fixed;
            width: 400px;
            height: 680px;
            top:50%;
            left: 50%;
            z-index: 3;
            margin-top: -300px;
            margin-left: -200px;
            font-size: 15px;
        }
        #modal1{
            height: 500px;
        }
        .orignal{
            width:20%;
            height:10%;
        }
        .lalala {
            width: 100px;
            height: 65px;
        }
    </style>
</head>
<body>

    <%
        String contextPath = request.getSession().getServletContext().getContextPath();
    %>
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>图书管理系统！&nbsp;</li>
                    <li>
                        <a href="index.html">请登录</a> &nbsp;
                        <a href="#" class="style-red">用户管理界面</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li class="arrow-icon">我的消息</li>
                    <li>|</li>
                    <li class="arrow-icon"> <a href="<%=contextPath%>/admin/">退出</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 头部模块 -->
    <header class="header w">
        <!-- logo -->
        <div class="logo">
            <h1>
                <a href="index.html" title="图书管理系统">人类进步的阶梯</a>
            </h1>
        </div>



    </header>
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt"> <a href="aindex.html">首页</a> </div>
                <div class="dd">
                    <ul>
                        <li><a href="<%=contextPath%>/admin/User/">用户管理</a> </li>
                        <li><a href="<%=contextPath%>/admin/book/">图书管理</a> </li>
                        <li><a href="<%=contextPath%>/admin/borrow/">图书借阅管理</a> </li>

                        <li><a href="<%=contextPath%>/admin/inform/all/">通知</a></li>
                        <li><a href="<%=contextPath%>/admin/adminPCenter/">个人中心</a> </li>

                    </ul>
                </div>
            </div>
            <form  id="fff"   action="<%=contextPath%>/admin/book/select" method="post" onsubmit="return testEmpty()">
                <select id="sss"    name="select">
                    <option value="bookName">书名</option>
                    <option value="author">作者</option>
                </select>
                <input  id="ttt"   type="text" name="text" />
                <input id="iii"    type="submit" value="搜索"/><br><br>
            </form>
<%--            <button class="tianjia" onclick="Show()">添加图书</button>--%>
            <input class="tianjia" type="button" value="添加图书" id="addBook">

        </div>
    </nav>
<%--    <a href="<%=contextPath%>/admin/">退出</a><br><br>--%>
<%--    <input type="button" value="添加图书" id="addBook"><br>--%>
<%--    <form action="<%=contextPath%>/admin/book/select" method="post" onsubmit="return testEmpty()">--%>
<%--        <select name="select">--%>
<%--            <option value="bookName">书名</option>--%>
<%--            <option value="author">作者</option>--%>
<%--        </select>--%>
<%--        <input type="text" name="text" id="text"/>--%>
<%--        <input type="submit" value="搜索"/><br><br>--%>
<%--    </form>--%>
    <div class="w">
        <div class="main">
            <table  id="mainTable" align="center " border="1 " cellpadding="1px " cellspacing="2px " width="980px "  ;>
                <thead class="biaoge ">
                <tr>
                    <th>图书编号</th>
                    <th >图片</th>
                    <th >书本类型</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>简介</th>
                    <th >总量</th>
                    <th >余量</th>
                    <th >备注</th>
                    <th>入库时间</th>
                    <th>操作一</th>
                    <th>操作二</th>

                </tr>
                </thead>
<%--    <form>--%>
<%--        <table border="1px">--%>
<%--            <th>图书编号</th>--%>
<%--            <th>图片</th>--%>
<%--            <th>书本类型</th>--%>
<%--            <th>书名</th>--%>
<%--            <th>作者</th>--%>
<%--            <th>简介</th>--%>
<%--            <th>总量</th>--%>
<%--            <th>余量</th>--%>
<%--            <th>备注</th>--%>
<%--            <th>入库时间</th>--%>
<%--            <th>操作一</th>--%>
<%--            <th>操作二</th>--%>
            <%
                List<Map<String, Object>> books = (List<Map<String, Object>>) request.getAttribute("books");
                if(books != null){
                    for(Map<String,Object>book : books){

            %>
            <tr>
                <td><%=book.get("id")%></td>
<%--                <td><img src="/image/<%=book.get("photo")%>"></td>--%>
                <td>
                    <div class="lalala">
                        <img src="/image/<%=book.get("photo")%>">
                    </div>
                </td>
                <td><%=book.get("type")%></td>
                <td><%=book.get("bName")%></td>
                <td><%=book.get("bAuthor")%></td>
                <td><%=book.get("bIntroduction")%></td>
                <td><%=book.get("account")%></td>
                <td><%=book.get("yuliang")%></td>
                <td><%=book.get("beizhu")%></td>
                <td><%=book.get("rukushijian")%></td>
                <td class="update">修改</td>
                <td><a href="<%=contextPath%>/admin/book/delete?bookid=<%=book.get("id")%>">删除</a></td>
            </tr>
            <%}%>
            <%}%>
        </table>
  <br><br>

            <div>
                <li class="fengye"><a onclick="deleteYeshu()"><<</a></li>
                <li class="fengye">第<label name="yeshu" id="yeshu">${yeshu}</label>页</li>
                <li class="fengye"><a onclick="addYeshu()">>></a></li>
            </div>


    <div id="shade" class="c1 hide"></div>
<%--    enctype="multipart/form-data"--%>
    <div id="modal" class="c2 hide">
        <form action="<%=contextPath%>/admin/book/update" method="post"  enctype="multipart/form-data">
            <h2 align="center">修改图书</h2><br>
            <label>原来的书本类型：</label><input type="text" id="typeName" readonly="true"><br>
            <label>图书类型：</label>
            <select id="typeId" name="typeId">
                <%
                    List<type> types = (List<type>) session.getAttribute("types");
                    if(types != null){
                        for(type t : types){
                %>
                <option value=<%=t.getId()%>><%=t.getType()%></option>
                <%}%>
                <%}%>
            </select><br>
            <label>图书编号：</label><input type="text" readonly="true" id="bookid" name="id"><br>
            <label>书名：</label><input type="text" id="bName" name="bName"/><br>
            <label>简介:</label><br><textarea  rows="5" cols="45" id="introduction" name="introduction"></textarea><br>
            <label>作者:</label><input type="text" id="author" name="author"/><br>
            <label>总量:</label><input type="text" id="account" name="accout"/><br>
            <label>余量:</label><input type="text" id="yuliang" name="yuliang" readonly="true"/><br>
            <label>备注:</label><br><textarea  rows="5" cols="45" id="beizhu" name="beizhu"></textarea><br>
            <label>入库时间:</label><input type="text" id="rukushijian" readonly="true"/><br>
            <label>原图片：</label><br><img  class="orignal" id="img" ><br>
            <label>修改图片:</label><input type="file" name="file"/><br><br>
            <input type="submit" value="确定修改">   <input type="button" value="取消" id="quit"></input>
        </form>
    </div>

    <div id="modal1" class="c2 hide">
        <form action="<%=contextPath%>/admin/book/add" method="post"  enctype="multipart/form-data" onsubmit="return testAdd()">
            <h2 align="center">添加图书</h2><br>
            <label>图书类型：</label>
            <select class="typeId" name="typeId">
                <%

                    if(types != null){
                        for(type t : types){
                %>
                <option value=<%=t.getId()%>><%=t.getType()%></option>
                <%}%>
                <%}%>
            </select><br>
<%--            <label>图书编号：</label><input type="text"  name="id" class="addBookid"><br>--%>
            <label>书名：</label><input type="text"  name="bName" class="addBookName"/><br>
            <label>简介:</label><br><textarea  rows="5" cols="45"  name="introduction" class="addIntroduction"></textarea><br>
            <label>作者:</label><input type="text" name="author" class="addAuthor"/><br>
            <label>总量:</label><input type="text"  name="accout" class="addAccount"/><br>
            <label>备注:</label><br><textarea  rows="5" cols="45" name="beizhu"></textarea><br>
            <label>图片:</label><input type="file" name="file"/><br><br>
            <input type="submit" value="确定添加">  <input type="reset" value="重置"> <input type="button" value="取消" class="quit"></input>
        </form>
    </div>
        </div>
    </div>

            <div class="w ">
                <div class="minyan">

                    好好建设图书馆，全心全意为读者服务！

                </div>
            </div>
</body>
    <script type="text/javascript">
        $(function (){
            $(".update").click(function (){
                $("#typeName").val()
                $("#bookid").val(this.parentNode.children[0].innerHTML);
                $("#bName").val(this.parentNode.children[3].innerHTML);
                $("#introduction").val(this.parentNode.children[5].innerHTML);
                $("#author").val(this.parentNode.children[4].innerHTML);
                $("#account").val(this.parentNode.children[6].innerHTML);
                $("#typeName").val(this.parentNode.children[2].innerHTML);

                //this.parentNode.children[1].innerHTML.lastIndexOf()
                //$("#img").attr('src',"/image/");
                this.parentNode.children[1].innerHTML.substr()
                var begin = this.parentNode.children[1].innerHTML.lastIndexOf("=");
                var end = this.parentNode.children[1].innerHTML.lastIndexOf('"');
                var src = this.parentNode.children[1].innerHTML.substring(begin+2,end);
                $("#img")[0].src=src;
                $("#yuliang").val(this.parentNode.children[7].innerHTML)
                $("#beizhu").val(this.parentNode.children[8].innerHTML)
                $("#rukushijian").val(this.parentNode.children[9].innerHTML)
                $("#shade").show();
                $("#modal").show();
            })
        })

        $(function (){
            $("#quit").click(function (){
                $("#shade").hide();
                $("#modal").hide();
            })
        })

        $(function (){
            $("#addBook").click(function (){
                $("#shade").show();
                $("#modal1").show();
            })
        })

        $(function (){
            $(".quit").click(function (){
                $("#shade").hide();
                $("#modal1").hide();
            })
        })



        function addYeshu(){
            var yeshu1 = document.getElementById("yeshu");
            window.location.href="<%=contextPath%>/admin/book/search/add?yeshu="+yeshu1.innerText;
        }
        function deleteYeshu(){
            var yeshu1 = document.getElementById("yeshu");
            window.location.href="<%=contextPath%>/admin/book/search/delete?yeshu="+yeshu1.innerText;
        }
        function testEmpty(){
            var test = document.getElementById("text").value;
            if(test.length > 0){
                return true;
            }else{
                alert("空")
                return false;
            }
        }

        function testAdd(){
            var addBookName = $(".addBookName").val();
            var addIntroduction = $(".addIntroduction").val();
            var addAuthor = $(".addAuthor").val();
            var addAccount = $(".addAccount").val();

            var reg=/^[1-9]/;   /*定义验证表达式*/
            // reg.test(addBookid);
            // reg.test(addAccount);

            if(addBookName.trim() != "" && addIntroduction.trim()!="" && addAuthor.trim()!="" && reg.test(addAccount)){
                return true;
            }
            alert("信息填写有误");
            return false;
        }
    </script>
</html>
